import type { CompanyInfoDto, EleSignInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import toNative from '@/utils/toNative'
import { Component, Emit, Prop, Ref, Watch } from 'vue-facing-decorator'
import Drawer from '@/components/drawer/Index'

import BasicRule from './BasicRule'
import EmailRule from './EmailRule'
import ApiPushRule from './ApiPushRule'
import { Button, message } from 'ant-design-vue'
import {
    queryConfigDetail,
    saveCommunicationConfig,
    updateCommunicationConfig
} from '@/api/emailConfig'
import type { AddType } from '@/api/types'
import type { ConfigListDto } from '@/api/emailConfig/types'
import { wait } from '@/utils/util'

@Component
export class DrawerAdd extends TableRender {
    @Prop() show!: boolean
    @Prop() type!: AddType
    @Prop() itemData!: ConfigListDto

    @Ref() basicRuleRef!: typeof BasicRule
    @Ref() emailRuleRef!: typeof EmailRule
    @Ref() apiPushRuleRef!: typeof ApiPushRule

    showDrawer = false

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
        if (this.showDrawer) {
            // 编辑或复制
            if (this.type === 'edit' || this.type === 'newAdd') {
                this.initEditData()
            }
            // this.getData()
        }
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    async initEditData() {
        const res = await queryConfigDetail({
            id: this.itemData.id as number
        })
        await wait(300)
        this.basicRuleRef.initData(res)
        this.emailRuleRef.initData(res)
        this.apiPushRuleRef.initData(res)
    }

    async onSubmit() {
        const basicData = await this.basicRuleRef.submit()
        const emailData = await this.emailRuleRef.submit()
        const apiData = await this.apiPushRuleRef.submit()
        const res = {
            ...basicData,
            ...emailData,
            ...apiData
        }
        if (this.type === 'add' || this.type === 'newAdd') {
            // 新增或复制
            await saveCommunicationConfig(res)
        } else if (this.type === 'edit') {
            // 编辑
            res.id = this.itemData.id
            await updateCommunicationConfig(res)
        }
        message.success('保存成功')
        this.showDrawer = false
        this.handleRefresh()
    }

    render() {
        return (
            <>
                <Drawer
                    v-model:show={this.showDrawer}
                    size={900}
                    title="推送规则"
                    resetStyle={true}
                    destroyOnClose
                    showClose
                    v-slots={{
                        default: () => {
                            return (
                                <div>
                                    <BasicRule ref="basicRuleRef" />
                                    <EmailRule ref="emailRuleRef" />
                                    <ApiPushRule ref="apiPushRuleRef" />
                                </div>
                            )
                        },
                        footer: () => {
                            return (
                                <Button type="primary" onClick={this.onSubmit}>
                                    确定
                                </Button>
                            )
                        }
                    }}
                ></Drawer>
            </>
        )
    }
}

export default toNative<{ type: AddType; itemData: ConfigListDto }, { refresh: () => void }>(
    DrawerAdd
)
